﻿@using BigRoom.Service.Common.Models;
@model QuizeModel

@{
    var hour = Model.QuizeDto.Hour?.ToString() ?? "00";
    var minute = Model.QuizeDto.Minute?.ToString() ?? "00";
}



@section MainStyle{


    <!-- bradcam_area_start -->
    <div class="bradcam_area breadcam_bg overlay2">
        <h3>Quize</h3>
    </div>
    <!-- bradcam_area_end -->

}
<div class="row">
    <div class="col-md-4">
        <button class="btn btn-primary mb-3">@($"{hour}:{minute}")</button>
        <div id="Timerspancontainer" class="mb-3 btn btn-success"></div>
        <input style="display:none" type="text" value="@Model.QuizeDto.Fileanswer" id="filequizename" />
        <input style="display:none" type="datetime" value="@Model.QuizeDto.TimeEnd" id="TimeEnd" />
        <form method="post" action="/Degree/CalculateDegree" id="questionform">
            <input name="quizeId" value="@Model.QuizeDto.Id" style="display:none"/>
            @for (int i = 0; i < Model.QuestionModels.Count(); i++)
            {
                <div class="@i mb-5">
                    <div class="form-group mb-3">

                        <input asp-for="QuestionModels.ElementAt(i).Question" class="form-control" />

                    </div>
                    @{
                        var choices = Model.QuestionModels.ElementAt(i).Choice;
                    }
                    @for (int j = 0; j < choices.Count(); j++)
                    {
                        if (!string.IsNullOrEmpty(choices[j]))
                        {
                            <div class="form-check"><input class="form-check-input" name="answers[@i]" value="@choices[j]" type="radio" /><label class="form-check-label">@choices[j]</label></div>

                        }
                    }




                </div>
            }



            <div class="form-group">
                <input type="button" id="sumbitquestion" value="Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>



@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>

    $(document).ready(() => {
        countdownTimeStart();
        function addHours(h) {
            return new Date(new Date().getTime() + (h * 60 * 60 * 1000));
        }
        function addMinute (minutes) {
            return new Date(new Date().getTime() + minutes * 60000);
        }
        $("#sumbitquestion").on("click", function () {
            if (confirm("You sure You wante To Submit")) {
                $("#questionform").submit();
            }
        });
        function countdownTimeStart() {
            let timer = new Date();
            if (@(Model.QuizeDto.Hour??0)!=0) {
               timer=addHours(@(Model.QuizeDto.Hour));
            }
            if (@(Model.QuizeDto.Minute??0)!=0) {
                timer = addMinute(@(Model.QuizeDto.Minute));
            }
            var countDownDate = timer.getTime();
            // Update the count down every 1 second
            var x = setInterval(function () {

                // Get todays date and time
                var now = new Date().getTime();

                // Find the distance between now an the count down date
                var distance = countDownDate - now;

                // Time calculations for days, hours, minutes and seconds
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                // Output the result in an element with id="demo"
                document.getElementById("Timerspancontainer").innerHTML = hours + "h "
                    + minutes + "m " + seconds + "s ";

                // If the count down is over, write some text
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("Timerspancontainer").innerHTML = "EXPIRED";
                    $("#questionform").submit();
                }
            }, 1000);
        }



    });





</script>
}
